<template>
	<view class="content">
		<view :style="{ 'marginTop': barTop + 'rpx','font-size':'25px' }">
			规划你的钱袋子
		</view>
		<u-picker v-model="show" mode="time" :params="params" @confirm="confirmDate()"></u-picker>
		<view style="display: flex;justify-content: space-between;height: 5%;align-items: center;">
			<view>
				<text style="font-size: 16px;" @click="confirm">返回</text>
			</view>
		</view>
		<view style="height: 90%;width: 100%;margin-top: 20rpx;">
			<u-cell-group>
				<u-cell-item icon="bag-fill" title="钱袋子" :value="formData.moneyTitle" :arrow="false"></u-cell-item>
				<u-cell-item icon="red-packet-fill" title="总金额" :value="formData.moneyTotal+'元'"
					:arrow="false"></u-cell-item>
				<u-cell-item icon="red-packet" title="余额" :value="formData.balanceTotal+'元'"
					:arrow="false"></u-cell-item>
				<u-cell-item :arrow="false" @click="show = true">
					<view style="display: flex;justify-content: space-between;">
						<text style="font-size: 20px;font-weight: bold;color: #606266;">账单明细</text>
						<text
							style="font-size: 20px;font-weight: bold;color: #606266;">筛选时间：{{currentDateTime?currentDateTime:parseTime(new Date(), '{y}年{m}月')}}</text>
					</view>
					<u-swipe-action :show="item.show" :index="index" v-for="(item, index) in formData.consumptionList"
						:key="index.id" @click="click" @open="open" :options="options" :disabled="disabled">
						<view>
							<u-line color="#606266" />
							<view style="display: flex;justify-content: space-between;">
								<view style="font-size: 18px;font-weight: bold;color: #606266;">
									{{item.consumptionTitle}}
								</view>
								<view style="font-size: 18px;font-weight: bold;color: #62b37a;"
									v-if="item.consumptionType === 0">-{{ item.consumptionTotal | formatDecimal }}
								</view>
								<view style="font-size: 18px;font-weight: bold;color: #f29100;" v-else>
									+{{item.consumptionTotal | formatDecimal}}元
								</view>
							</view>
							<view style="display: flex;justify-content: space-between;">
								<view style="font-size: 14px;font-weight: bold;color: #999ea5;">
									{{parseTime(item.createTime,'{m}-{d}')}}
								</view>
								<view style="font-size: 14px;font-weight: bold;color: #999ea5;">
									余额：{{item.consumptionBalance| formatDecimal}}元</view>
							</view>
						</view>
					</u-swipe-action>
				</u-cell-item>
			</u-cell-group>
		</view>
		<u-toast ref="uToast" />
		<u-mask :show="whispersShow" @click="whispersShow = false">
			<view class="moneyWarp">
				<view class="moneyRect" @tap.stop>
					<view class="moneyTitle">{{whispersTitle}}</view>
					<view class="moneyContent">
						<u-form-item label="去向:" label-width="150" v-if="!isUpdate">
							<u-input v-model="currentData.consumptionTitle" type="text" :border="false"
								placeholder="吃什么好吃呢？" confirm-type="next" />
						</u-form-item>
						<u-form-item label="金额:" label-width="150" v-if="!isUpdate">
							<input v-model="currentData.consumptionTotal" type="digit" placeholder="花多少钱钱呢？"
								:border="false" placeholder-style="color: #c0c4cc;" />
						</u-form-item>
						<u-form-item label="额度来源:" label-width="150" v-if="isUpdate">
							<u-input v-model="currentData.consumptionTitle" type="text" :border="false"
								placeholder="注明额度来源呢？" confirm-type="next" />
						</u-form-item>
						<u-form-item label="充电额度:" label-width="150" v-if="isUpdate">
							<input v-model="currentData.consumptionTotal" type="digit" placeholder="提多少额度呢？"
								:border="false" placeholder-style="color: #c0c4cc;" />
						</u-form-item>
						<view class="button-group">
							<u-button type="success" size="medium" @click="updateConsumption()"
								style="margin-right: 20rpx;">完成</u-button>
						</view>
					</view>
				</view>
			</view>
		</u-mask>
	</view>
</template>

<script>
	import {
		removeConsumption,
		getConsumptionList,
		updateConsumption
	} from '@/api/bot/consumption'
	import {
		parseTime
	} from '@/utils/date'
	export default {
		data() {
			return {
				barTop: 0,
				formData: {},
				show: false,
				disabled: false,
				currentDateTime: '',
				currentData: '',
				// 如果params值如下(时间选择模式)：：
				query: {
					botMoneyId: '',
					dateSearchValue: ''
				},
				params: {
					year: true,
					month: true,
					day: false,
					hour: false,
					minute: false,
					second: false,
					timestamp: false,
				},
				options: [{
						text: '修改',
						style: {
							backgroundColor: '#007aff'
						}
					},
					{
						text: '删除',
						style: {
							backgroundColor: '#dd524d'
						}
					}
				],
				whispersTitle: '记录你的钱钱去向',
				whispersShow: false,
				// 清单功能：更新状态
				isUpdate: false,
			}
		},
		filters: {
			formatDecimal: function(value) {
				return Number(value).toFixed(2); // 将小数格式化为#0.00的格式
			}
		},
		onLoad(option) {
			const formDataStr = decodeURIComponent(option.formData);
			this.formData = JSON.parse(formDataStr);
			this.query.botMoneyId = this.formData.id
			this.query.dateSearchValue = this.parseTime(new Date(), '{y}-{m}');
			this.getConsumptionList();
			// if (this.formData.path === 'index') {
			// 	this.disabled = false
			// } else {
			// 	this.disabled = false
			// }
		},
		created() {
			// 1.获取屏幕可使用宽度
			let windowWidth = uni.getSystemInfoSync().windowWidth;
			// 2.获取状态栏高度
			const statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
			// 3.获取胶囊按钮位置信息
			const menuButton = uni.getMenuButtonBoundingClientRect();
			// 4.计算出导航栏高度  换算成rpx
			let navHeight = (menuButton.height + (menuButton.top - statusBarHeight) * 2) * (750 / windowWidth);
			// 5.导航栏与状态栏拉开距离  margin-top: statusBarTop + 'rpx'; 
			const statusBarTop = statusBarHeight * (750 / windowWidth);
			this.barTop = statusBarTop;

		},
		methods: {
			getConsumptionList() {
				uni.showLoading({
					title: '加载中...'
				})
				getConsumptionList(this.query).then(res => {
					this.formData.consumptionList = res.rows
					uni.hideLoading()
				})
			},
			confirmDate(e) {
				this.currentDateTime = e.year + '年' + e.month + '月'
				this.query.dateSearchValue = e.year + '-' + e.month
				this.getConsumptionList()
			},
			click(index, index1) {
				if (index === 0) {
					this.currentData = this.formData.consumptionList[index]
					if (index1 == 0) {
						this.formData.consumptionList[index].show = false;
						if (this.currentData.consumptionType == 1) {
							this.isUpdate = true
							this.whispersTitle = '为你的钱袋子充电'
						} else {
							this.isUpdate = false
							this.whispersTitle = '记录你的钱钱去向'
						}
						this.whispersShow = true;
					} else {
						this.$modal.confirm('确定删除该记录吗？').then(() => {
							this.formData.consumptionList[index].show = false;
							this.removeConsumption()
							this.formData.consumptionList.splice(index, 1);
						})
					}
				} else {
					this.$refs.uToast.show({
						title: '只能操作最新一条数据',
						type: 'warning'
					})
				}
			},
			// 如果打开一个的时候，不需要关闭其他，则无需实现本方法
			open(index) {
				// 先将正在被操作的swipeAction标记为打开状态，否则由于props的特性限制，
				// 原本为'false'，再次设置为'false'会无效
				this.formData.consumptionList[index].show = true;
				this.formData.consumptionList.map((val, idx) => {
					if (index != idx) this.formData.consumptionList[idx].show = false;
				})
			},
			updateConsumption() {
				updateConsumption(this.currentData).then(res => {
					if (res.code == 200) {
						this.$modal.msgSuccess("修改成功")
						this.getConsumptionList()
					} else {
						this.$modal.msgError("修改失败")
					}
				})
			},
			removeConsumption() {
				removeConsumption(this.currentData).then(res => {
					if (res.code == 200) {
						this.$modal.msgSuccess("删除成功")
						this.whispersShow = false
						this.getConsumptionList()
					} else {
						this.$modal.msgError("删除失败")
					}
				})
			},
			confirm() {
				uni.navigateBack()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		display: flex;
		flex-direction: column;
		height: 100vh;
		padding: 0 15rpx;
		background-color: #62b37a;
		overflow-y: scroll;
		/* 添加滚动条 */
	}

	.moneyWarp {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
	}

	.moneyRect {
		width: 300px;
		background-color: #fff;
		border-radius: 8px;
		padding: 20px;
		box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
	}

	.moneyTitle {
		font-size: 18px;
		display: flex;
		justify-content: center;
		margin-bottom: 20px;
	}

	.moneyContent {
		height: 80%;
		display: flex;
		flex-direction: column;
		padding: 5rpx 15rpx;
	}

	.button-group {
		width: 100%;
		display: flex;
		justify-content: center;
		margin-top: 20px;
	}
</style>